<template>
  <div ref="linksChartRef" style="height: 320px; padding: 0 0 32px 32px" />
</template>

<script name="ChartCard" lang="ts" setup>
const loading = ref<boolean>(false);
const linksChartOption = {
  color: ["#3a9dff"],
  title: {
    text: "销售排行榜",
    textStyle: {
      fontSize: 12
    }
  },

  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: "value"
    }
  ],
  series: [
    {
      name: "销量",
      type: "bar",
      barWidth: "60%",
      data: [10, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220]
    }
  ]
};
// echarts 图表
const linksChartRef = ref();
onMounted(()=>{
  useCharts(linksChartRef, linksChartOption);
})
</script>
